<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="Zuo Yan" />
		<meta name="viewport" content="width=device-width" />
		<title>4-2-5</title>
		<style type="text/css">
			/* 定义一个名为 activeClass 的样式类，设置文字颜色为红色 */
			.activeClass {
				color: red
			}
		</style>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 动态应用类名，根据 isActive 的值决定是否应用 'active' 类，以及始终应用 errorCls 类 -->
			<div :class="[{'active' : isActive}, errorCls]">yyyy</div>
			<!-- 根据 isActive 的值决定应用 classA 还是 classB ，同时应用 errorCls 类 -->
			<div :class="[isActive?classA:classB,errorCls]">qqq</div>
			<!-- 注释掉的部分：根据 isActive 的值决定应用 activeClass 还是空字符串，以及 errorClass 类 -->
			<!-- <div :class="[isActive?activeClass:'', errorClass]">qqq</div> -->
		</div>
		<script>
			/* 创建一个名为 app 的 Vue 实例 */
			var app = new Vue({
				el: '#app', // 指定 Vue 实例挂载的元素
				data: { // 定义数据
					classA: "ClassA", // 类名
					classB: "ClassB", // 类名
					isActive: true, // 布尔值，用于控制类的应用
					errorCls: 'error' // 类名
				}
			});
		</script>
	</body>
</html>